<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title>jQuery调色板</title>
		<style type="text/css">
			.colorPicker{
				border: 1px solid #ccc;
				width: 300px;
				height:36px;
				margin-left: 50px;
				float: left;
			}
		</style>
	</head>
	<body>
		<p style="padding: 30px;">点击下方黑色方框查看效果</p>
		<div class="colorPicker1 colorPicker">
		</div>
		<div class="colorPicker2 colorPicker">
		</div>
		<div color-picker class="colorPicker3 colorPicker"></div>
	</body>
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".colorPicker1").colorPicker({
			callback:function(color){
				console.log("color1",color)
			}
		})
		$(".colorPicker2").colorPicker({
			callback:function(color){
				console.log("color2",color)
			}
		})
	</script>
</html>
